<template>
  <div class="param-data-table">
    <el-table
      :data="tableData"
      border
      size="mini"
      style="width: 100%"
      empty-text="暂无参数数据"
      :max-height="maxHeight"
    >
      <!-- 参数名称列 -->
      <el-table-column
        prop="paramName"
        label="参数名称"
        width="150"
        fixed="left"
      >
        <template #default="scope">
          <div class="param-name-cell">
            <span class="param-name">{{ scope.row.paramName }}</span>
            <span v-if="scope.row.unit" class="param-unit">({{ scope.row.unit }})</span>
            <el-tag 
              v-if="scope.row.paramType === 'calculation'" 
              size="mini" 
              type="success"
              class="calc-tag"
            >
              计算
            </el-tag>
            <el-tag 
              v-if="scope.row.isMultiMeasure && scope.row.multiMeasureCount > 1" 
              size="mini" 
              type="warning"
              class="multi-tag"
            >
              {{ scope.row.multiMeasureCount }}次
            </el-tag>
          </div>
        </template>
      </el-table-column>

      <!-- 参数编码列 -->
      <el-table-column
        prop="paramCode"
        label="参数编码"
        width="120"
      >
        <template #default="scope">
          <code class="param-code">{{ scope.row.paramCode }}</code>
        </template>
      </el-table-column>

      <!-- 数据类型列 -->
      <el-table-column
        prop="dataType"
        label="数据类型"
        width="100"
      >
        <template #default="scope">
          <el-tag size="mini" :type="getDataTypeTag(scope.row.dataType)">
            {{ getDataTypeText(scope.row.dataType) }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- 参数值列 -->
      <el-table-column
        label="参数值"
        min-width="200"
      >
        <template #default="scope">
          <param-value-display
            :param="scope.row"
            :value="getParamValue(scope.row.paramCode)"
            :show-validation="true"
          />
        </template>
      </el-table-column>

      <!-- 验证状态列 -->
      <el-table-column
        label="验证状态"
        width="100"
        align="center"
      >
        <template #default="scope">
          <validation-status 
            :param="scope.row"
            :value="getParamValue(scope.row.paramCode)"
          />
        </template>
      </el-table-column>

      <!-- 必填状态列 -->
      <el-table-column
        label="必填"
        width="80"
        align="center"
      >
        <template #default="scope">
          <el-tag 
            v-if="scope.row.required" 
            size="mini" 
            type="danger"
            effect="dark"
          >
            必填
          </el-tag>
          <span v-else class="optional-text">选填</span>
        </template>
      </el-table-column>

      <!-- 计算表达式列（仅计算参数显示） -->
      <el-table-column
        label="计算表达式"
        min-width="200"
        v-if="hasCalculationParams"
      >
        <template #default="scope">
          <div v-if="scope.row.paramType === 'calculation'" class="calc-expr">
            <code class="expr-code">{{ scope.row.calculationExpr }}</code>
            <div v-if="scope.row.dependencies && scope.row.dependencies.length" class="dependencies">
              <span class="deps-label">依赖:</span>
              <el-tag
                v-for="dep in scope.row.dependencies"
                :key="dep"
                size="mini"
                class="dep-tag"
              >
                {{ dep }}
              </el-tag>
            </div>
          </div>
          <span v-else class="not-applicable">-</span>
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column
        label="操作"
        width="120"
        fixed="right"
        align="center"
      >
        <template #default="scope">
          <el-button
            type="text"
            size="mini"
            @click="viewParamDetails(scope.row)"
            icon="el-icon-info"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 参数详情对话框 -->
    <el-dialog
      :title="detailDialog.title"
      :visible.sync="detailDialog.visible"
      width="600px"
    >
      <param-details
        v-if="detailDialog.visible"
        :param="detailDialog.param"
        :value="detailDialog.value"
      />
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialog.visible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ParamValueDisplay from './ParamValueDisplay.vue'
import ValidationStatus from './ValidationStatus.vue'
import ParamDetails from './ParamDetails.vue'

export default {
  name: 'ParamDataTable',
  components: {
    ParamValueDisplay,
    ValidationStatus,
    ParamDetails
  },
  props: {
    params: {
      type: Array,
      default: () => []
    },
    data: {
      type: Object,
      default: () => ({})
    },
    maxHeight: {
      type: Number,
      default: 400
    },
    showActions: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      detailDialog: {
        visible: false,
        title: '',
        param: null,
        value: null
      }
    }
  },
  computed: {
    tableData() {
      return this.params.filter(param => param && param.paramCode)
    },
    
    hasCalculationParams() {
      return this.tableData.some(param => param.paramType === 'calculation')
    }
  },
  methods: {
    /**
     * 获取参数值
     */
    getParamValue(paramCode) {
      if (!this.data || !paramCode) return null
      return this.data[paramCode]
    },
    
    /**
     * 获取数据类型标签样式
     */
    getDataTypeTag(dataType) {
      const tagMap = {
        text: 'info',
        number: 'primary',
        select: 'success',
        date: 'warning',
        boolean: 'danger'
      }
      return tagMap[dataType] || 'info'
    },
    
    /**
     * 获取数据类型文本
     */
    getDataTypeText(dataType) {
      const textMap = {
        text: '文本',
        number: '数字',
        select: '选择',
        date: '日期',
        boolean: '布尔',
        textarea: '多行文本',
        attachment: '附件'
      }
      return textMap[dataType] || dataType
    },
    
    /**
     * 查看参数详情
     */
    viewParamDetails(param) {
      const value = this.getParamValue(param.paramCode)
      this.detailDialog = {
        visible: true,
        title: `参数详情 - ${param.paramName}`,
        param: param,
        value: value
      }
    }
  }
}
</script>

<style scoped>
.param-data-table {
  width: 100%;
}

.param-name-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.param-name {
  font-weight: 500;
  color: #303133;
}

.param-unit {
  font-size: 12px;
  color: #909399;
}

.calc-tag,
.multi-tag {
  margin-left: 4px;
}

.param-code {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  background: #f4f4f5;
  padding: 2px 6px;
  border-radius: 2px;
  color: #606266;
}

.calc-expr {
  font-size: 12px;
}

.expr-code {
  font-family: 'Consolas', 'Monaco', monospace;
  background: #f0f9ff;
  padding: 4px 6px;
  border-radius: 2px;
  color: #409eff;
  display: block;
  margin-bottom: 6px;
  word-break: break-all;
}

.dependencies {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.deps-label {
  font-size: 11px;
  color: #909399;
}

.dep-tag {
  font-family: 'Consolas', 'Monaco', monospace;
}

.optional-text {
  font-size: 12px;
  color: #909399;
  font-style: italic;
}

.not-applicable {
  color: #c0c4cc;
  font-style: italic;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .param-data-table {
    font-size: 12px;
  }
  
  .param-name-cell {
    min-width: 120px;
  }
}

@media (max-width: 768px) {
  .dependencies {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>